import React from 'react'
// import Store from './store'
import { Carousel,WhiteSpace, WingBlank } from 'antd-mobile';
import { observer, inject } from "mobx-react"
import {withRouter} from "react-router-dom"
// import getBanner from "./api/index"
// import { runInAction, observable, action } from "mobx"
@withRouter
@inject("SreachStore")
@observer
class Sreach extends React.Component {
    constructor() {
        super()
        this.state = {
            // value: '美食',
            data: ['1', '2', '3'],
            imgHeight: 500,
            slideIndex: 2,
        };
    }

    onChange = (value) => {
        this.setState({ value });
    };
    clear = () => {
        this.setState({ value: '' });
    };
    componentDidMount() {
        this.props.SreachStore.get_sreach()

        setTimeout(() => {
            const arr = this.props.SreachStore.Sreach_store
            this.setState({
                data: arr
            });
        }, 100)

    }
    render() {
        // console.log(this.props.SreachStore.Sreach_store)
        // console.log(Sreach_store)
        return (
            <div>
                {/* <div className="Sreach_container">
                <span><svg t="1574081247894" className="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1750" width="32" height="32"><path d="M512 856.5c-46.3 0-91.2-9.1-133.5-27-40.8-17.3-77.5-42-109-73.5s-56.2-68.2-73.5-109.1c-17.9-42.3-27-87.3-27-133.6V407h48v106.4c0 162.7 132.3 295.1 295 295.1s295-132.4 295-295.1V407h48v106.4c0 46.3-9.1 91.3-27 133.6-17.3 40.9-42 77.6-73.5 109.1s-68.2 56.2-109 73.5c-42.3 17.8-87.2 26.9-133.5 26.9z" p-id="1751"></path><path d="M488 832.5h48V1024h-48zM512 728.9c-57.5 0-111.6-22.4-152.3-63.1-40.7-40.7-63.1-94.8-63.1-152.4V215.5c0-57.6 22.4-111.7 63.1-152.4S454.5 0 512 0c57.5 0 111.6 22.4 152.3 63.1 40.7 40.7 63.1 94.8 63.1 152.4v297.9c0 57.6-22.4 111.7-63.1 152.4-40.7 40.6-94.8 63.1-152.3 63.1zM512 48c-92.3 0-167.4 75.1-167.4 167.5v297.9c0 92.4 75.1 167.5 167.4 167.5s167.4-75.1 167.4-167.5V215.5C679.4 123.1 604.3 48 512 48z" p-id="1752"></path></svg></span>
                <input type="text" className="Sreach_input"/>
                <button className="Sreach_btn"><span>确定</span></button>
                <span><svg t="1574081305968" className="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1892" width="32" height="32"><path d="M257.138 2.276c10.24 0 20.594 3.64 28.444 10.922L795.307 485.604c15.70100001 14.563 15.701 38.229 0 52.792L285.582 1010.802c-15.70100001 14.563-41.187 14.563-56.889 0-15.701-14.564-15.70100001-38.23 0-52.793L709.973 512l-481.28-446.009c-15.70100001-14.563-15.70100001-38.23 0-52.793 7.851-7.282 18.205-10.922 28.445-10.922z" fill="#333333" p-id="1893"></path></svg></span>
                </div> */}
                 <WingBlank>
                    <WhiteSpace />
                    <Carousel
                        autoplay={true}
                        infinite={true}
                        dots={true}
                        selectedIndex={this.state.slideIndex}
                        beforeChange={(from, to) => `slide from ${from} to ${to}`}
                        afterChange={( ) => 'slide to'}
                    >
                        {this.state.data.map((val, index) => (
                            <a
                                key={val + index}
                                href="#"
                                style={{ display: 'inline-block', width: '400px', height: this.state.imgHeight }}
                            >
                                <img
                                    src={val.imageUrl}
                                    alt=""
                                    style={{ width: '100%', verticalAlign: 'top' }}
                                    onLoad={() => {
                                        // fire window resize event to change height
                                        window.dispatchEvent(new Event('resize'));
                                        this.setState({ imgHeight: '100%' });

                                    }}
                                />
                            </a>
                        ))}
                    </Carousel>
                </WingBlank>
            </div>

        );
    }
}

export default Sreach